<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-07-13 14:11:30
 * @FilePath     : \web3d\my\examples\polyline.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>旋转立方体-BoxGeometry</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<canvas id="fireflx"></canvas>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';

			const canvas = document.querySelector('#fireflx');
			let camera, scene, renderer;

			import {
				WebGLRenderer,
				PerspectiveCamera,
				LineBasicMaterial,
				BufferGeometry,
				Vector3,
				Line,
				Scene,
				MeshStandardMaterial,
				Mesh,
				AmbientLight,
				SpotLight,
				PCFSoftShadowMap,
			} from 'three';

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;

			//二、画线
			renderer = new WebGLRenderer({ canvas });
			renderer.setSize(w, h);

			camera = new PerspectiveCamera(45, w / h, 1, 500);
			camera.position.set(0, 0, 100);
			camera.lookAt(0, 0, 0);

			scene = new Scene();

			const material = new LineBasicMaterial({ color: 0x00ff00 });

			const points = [];
			// 矢量
			points.push(new Vector3(-10, 0, 0));
			points.push(new Vector3(0, 10, 0));
			points.push(new Vector3(10, 0, 0));

			const geometry = new BufferGeometry().setFromPoints(points);

			const line = new Line(geometry, material);

			scene.add(line);
			renderer.render(scene, camera);
		</script>
	</body>
</html>
